Day25 Flask（二）

2024 iThome 鐵人賽

DAY 25

Python

少年Py 的漂流日記- 第一次相遇系列第 25 篇

16th鐵人賽

hiyja

團隊NUTC imac

2024-10-03 00:12:39

67 瀏覽

分享至

Flask 通常會與 HTML 一起使用，這次就要說說要如何將這兩個東西去做連動。
首先在資料夾裡面再新增一個資料夾，取名為 templates，Flask 會自動尋找該資料夾中的 HTML 檔案。
我們在 templates 資料夾裡再新增一個名為 index.html 的檔案。
內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
</head>
<body>
    <h1>這裡是首頁。</h1>
</body>
</html>

再來我們修改 app.py 如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

這樣當用戶訪問 / 路徑時，Flask 會回傳 index.html，並顯示在瀏覽器中。
我們也可以將變數傳遞到 HTML 模板中，我們用上次的數學加法作為範例。
我們新增一個 sum.html 到 templates 資料夾裡。
內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數學加法</title>
</head>
<body>
    <h1>{{ num_1 }} + {{ num_2 }} = {{ num_1+num_2 }}</h1>
</body>
</html>

並在 app.py 新增下列程式碼：

@app.route('/<int:num_1>/<int:num_2>')
def sum(num_1, num_2):
    return render_template('sum.html', num_1=num_1, num_2=num_2)

當使用者訪問 http://127.0.0.1:5000/數字1/數字2 的時後，Flask 會計算這兩個數字的和，並將結果顯示在 sum.html 中。透過 {{ }} 語法，我們可以動態顯示使用者傳遞的參數，從而實現個性化的頁面，讓網頁內容更具互動性，這樣一來，我們就能利用 Flask 和 HTML 共同完善我們的網頁。